<template>
   <div class="dashboardWrap">
      <div class="entAndBillInfoWrap">
         <div class="entAccountInfo">
            <a-row class="top" type="flex" align="middle">
               <a-col class="label">账户信息</a-col>
               <a-col class="entName"> •{{ entAccountInfo.entName }}</a-col>
            </a-row>
            <a-divider class="divider"/>
            <a-row type="flex">
               <a-col :span="10">
                  <a-row>
                     <a-col class="remainAmountLabel">• 可用额度</a-col>
                     <a-col class="remainAmount">¥ {{ entAccountInfo.remainAmount | formatMoney }}</a-col>
                     <a-col>
                        <a-progress
                           :percent="(entAccountInfo.remainAmount * 100) / entAccountInfo.totalAmount"
                           :showInfo="false"
                           :strokeWidth="5"
                        />
                     </a-col>
                     <a-col class="totalAmount">授信额度 ¥ {{entAccountInfo.totalAmount | formatMoney }}</a-col>
                  </a-row>
               </a-col>
               <a-col :offset="6" :span="8">
                  <a-row>
                     <a-col class="remainAmountLabel">• 总开卡人数</a-col>
                     <a-col class="remainAmount">{{ entAccountInfo.totalOpenBankNum | formatNum }}</a-col>
                  </a-row>
               </a-col>
            </a-row>
         </div>
         <div class="billInfo entAccountInfo">
            <a-row class="top" type="flex" align="middle">
               <a-col class="label">账单信息</a-col>
               <a-col class="entName" v-if="billInfo.billType==='needPay'">
                  <a-button type="primary" size="small" @click="doRepay()">立即还款</a-button>
               </a-col>
            </a-row>
            <a-divider class="divider"/>
            <div v-if="billInfo.billType==='needPay'">
               <a-row type="flex" style="margin-bottom: 10px">
                  <a-col :span="12">
                     <a-col class="itemLable">{{ billInfo.monthTime &&
                        Number(billInfo.monthTime.substr(-2))}}月应还（因公消费）
                     </a-col>
                     <a-col class="itemCon">¥ {{ billInfo.busAmount | formatMoney }}</a-col>
                  </a-col>
                  <a-col :span="12">
                     <a-col class="itemLable">{{ billInfo.monthTime &&
                        Number(billInfo.monthTime.substr(-2))}}月账单
                     </a-col>
                     <a-col class="itemCon">¥ {{ billInfo.billAmount | formatMoney }}</a-col>
                  </a-col>
               </a-row>
               <a-row>
                  <a-col :span="12">
                     <a-col class="itemLable">账单日</a-col>
                     <a-col class="itemCon">{{ billInfo.billDate }}</a-col>
                  </a-col>
                  <a-col :span="12">
                     <a-col class="itemLable">还款日</a-col>
                     <a-col class="itemCon">{{ billInfo.repayDate }}</a-col>
                  </a-col>
               </a-row>
            </div>
            <div v-if="billInfo.billType==='pending'">
               <a-row type="flex" style="margin-bottom: 10px">
                  <a-col :span="12">
                     <a-col class="itemLable">{{ billInfo.monthTime &&
                        Number(billInfo.monthTime.substr(-2))}}月应还（消费合计）
                     </a-col>
                     <a-col class="itemCon">¥ {{ billInfo.billAmount | formatMoney }}</a-col>
                  </a-col>
               </a-row>
               <a-row>
                  <a-col :span="12">
                     <a-col class="itemLable">账单日</a-col>
                     <a-col class="itemCon">{{ billInfo.billDate }}</a-col>
                  </a-col>
                  <a-col :span="12">
                     <a-col class="itemLable">还款日</a-col>
                     <a-col class="itemCon">{{ billInfo.repayDate }}</a-col>
                  </a-col>
               </a-row>
            </div>
         </div>
      </div>
      <div class="compareLineWrap">
         <a-row style="margin-bottom: 30px;" type="flex" justify="start">
            <a-row style="width: 15%">
               <a-col class="label">&nbsp;</a-col>
               <a-col class="todayLabel">今日</a-col>
               <a-col>昨日</a-col>
            </a-row>
            <a-row
               :class="{ selected: 'consumeAmount' === compareType }"
               style="width: 20%"
            >
               <a-col @click="compareTypeChange('consumeAmount')" class="label">{{ compareTypes.consumeAmount }}</a-col>
               <a-col class="today">¥{{ compareDataToday.consumeAmount | formatMoney }}
               </a-col>
               <a-col class="yesterday">¥{{ compareDataYesterday.consumeAmount | formatMoney }}
               </a-col>
            </a-row>
            <a-row
               :class="{ selected: 'busAmount' === compareType }"
               style="width: 20%"
            >
               <a-col @click="compareTypeChange('busAmount')" class="label">{{ compareTypes.busAmount }}
               </a-col>
               <a-col class="today">¥{{ compareDataToday.busAmount | formatMoney }}
               </a-col>
               <a-col class="yesterday">¥{{ compareDataYesterday.busAmount | formatMoney }}
               </a-col>
            </a-row>
            <a-row
               :class="{ selected: 'consumeTimes' === compareType }"
               style="width: 20%"
            >
               <a-col @click="compareTypeChange('consumeTimes')" class="label">{{ compareTypes.consumeTimes }}
               </a-col>
               <a-col class="today">{{ compareDataToday.consumeTimes | formatNum }}
               </a-col>
               <a-col class="yesterday">{{ compareDataYesterday.consumeTimes | formatNum }}
               </a-col>
            </a-row>
            <a-row
               :class="{ selected: 'consumePersons' === compareType }"
               style="width: 20%"
            >
               <a-col @click="compareTypeChange('consumePersons')" class="label">{{ compareTypes.consumePersons }}
               </a-col>
               <a-col class="today">{{ compareDataToday.consumePersons | formatNum }}
               </a-col>
               <a-col class="yesterday">{{ compareDataYesterday.consumePersons | formatNum }}
               </a-col>
            </a-row>
         </a-row>

         <a-select
            style="width: 20%; font-size: 12px"
            :options="monthTypes"
            defaultValue="currentVsLast"
            showSearch
            size="small"
            placeholder="请选择对比维度"
            @change="monthTypeChange"
         />

         <ve-line
            :data="compareLineChartData"
            :extend="compareLineChartExtend"
         />
      </div>
      <!--消费情况概览-->
      <div class="consumeDetailWrap">
         <div style="margin-bottom: 20px">
            <a-row
               type="flex"
               align="middle"
               justify="space-between"
               style="margin-bottom: 50px;padding-right: 5%"
            >
               <a-col :span="4" style="color: #627EFF; font-size: 16px; font-weight: 800">消费情况概览</a-col>
               <a-col :span="20">
                  <a-row type="flex" justify="end">
                     <a-col :span="5">
                        <a-select
                           style="width: 100%"
                           :options="billBussAttrs"
                           defaultValue="all"
                           showSearch
                           placeholder="请选择消费类型"
                           @change="consumeTypeChange"
                        />
                     </a-col>
                     <a-col style="margin-left: 15px">
                        <a-month-picker
                           :disabledDate="disabledStartDate"
                           placeholder="开始日期"
                           v-model="startMonth"
                        ></a-month-picker>
                        ~
                        <a-month-picker
                           @change="onChangeEnd"
                           :disabledDate="disabledEndDate"
                           placeholder="结束日期"
                           v-model="endMonth"
                        ></a-month-picker>
                     </a-col>
                     <a-col style="margin-left: 5px">
                        <a-button type="primary" style="font-weight: 800" @click="searchConsumeDetail">查询</a-button>
                     </a-col>
                  </a-row>
               </a-col>
            </a-row>

            <a-row>
               <ve-histogram
                  :data="consumeDetailBarChart"
                  :extend="consumeDetailBarChartExtend"
               />
            </a-row>
         </div>

         <a-row type="flex">
            <a-col :span="10">
               <div class="label">消费类别占比</div>
               <ve-ring
                  :data="consumeDetailRingChartData"
                  :settings="consumeDetailRingChartSettings"
                  :extend="consumeDetailRingExtend"
                  :after-config="consumeDetailRingAfterConfig"
                  :after-set-option-once="consumeDetailRingAfterSetOptionOnce"
                  :events="consumeDetailRingChartEvents"
               />
            </a-col>
            <a-col :span="10" :offset="2">
               <div class="label" style="margin-bottom: 30px;">
                  个人消费情况
               </div>
               <a-row>
                  <div
                     v-for="(item, index) in consumeDetailPersonalConsume"
                     :key="index"
                     class="personalConsumeWrap"
                  >
                     <a-row type="flex" class="item">
                        <a-col
                           :span="1"
                           :offset="2"
                           :class="{
                              topThree: index <= 2,
                              leftOver: index > 2,
                              index: true
                           }"
                        >
                           {{ index + 1 }}
                        </a-col>
                        <a-col :span="4" :offset="2">{{ item.name }}</a-col>
                        <a-col :span="8" :offset="4"
                        >¥ {{ item.totalConsumeAmount | formatMoney }}
                        </a-col>
                     </a-row>
                  </div>
               </a-row>
            </a-col>
         </a-row>
      </div>
   </div>
</template>

<script>
import moment from 'moment'
import 'moment/locale/zh-cn'
import { formatMoney, monthDiff, debounce } from '@/utils/util'
import { get, post } from '@/utils/http'
import { getCookie } from '@/utils/cookieUtils'

moment.locale('zh-cn')

// 对比维度
const monthTypes = [
   {
      label: '本月对比上月',
      value: 'currentVsLast'
   },
   {
      label: '上月对比前月',
      value: 'lastVsPrevious'
   }
]

// 维度映射
const compareTypes = {
   consumeAmount: '消费金额',
   busAmount: '因公消费',
   consumeTimes: '刷卡次数',
   consumePersons: '刷卡人数'
}

// 消费类型
const billBussAttrs = [
   {
      label: '总账单',
      value: 'all'
   },
   {
      label: '因公账单',
      value: 'business'
   },
   {
      label: '因私账单',
      value: 'private'
   },
   {
      label: '未标注账单',
      value: 'tbd'
   }
]

export default {
   data() {
      return {
         monthTypes,
         monthType: 'currentVsLast',
         compareTypes,
         compareType: 'consumeAmount',
         billBussAttrs,
         billBussAttr: 'all',
         startMonth: moment().subtract(11, 'months'),
         endMonth: moment(),
         // 柱状图配置
         consumeDetailBarChartExtend: {
            grid: {
               left: 20,
               right: 40
            },
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'line'
               },
               formatter: function(params) {
                  return `¥ ${formatMoney(params[0].data)}`
               }
            },
            series: {
               itemStyle: {
                  color: '#627EFF'
               },
               barWidth: 25,
               label: {
                  normal: {
                     show: true,
                     position: 'top',
                     textStyle: {
                        color: '#5475c7'
                     },
                     formatter: function(params) {
                        return `¥ ${formatMoney(params.data)}`
                     }
                  }
               }
            },
            legend: {
               show: true
               // data: [
               //    {
               //       name: '消费趋势',
               //       icon: 'circle',
               //       textStyle: {
               //          color: 'red', // 单独设置某一个图列的颜色
               //          backgroundColor: '#fff' // 单独设置某一个图列的字体背景色
               //       }
               //    }
               // ]
            },

            xAxis: {
               show: true,
               name: '月份',
               nameLocation: 'end',
               nameTextStyle: {
                  color: 'rgba(0, 0, 0, 0.65)',
                  padding: [30, 30, 0, -10]
               },
               nameGap: 0,
               axisLine: {
                  // 坐标轴 轴线
                  show: true, // 是否显示
                  symbol: ['none', 'arrow'], // 是否显示轴线箭头
                  symbolSize: [8, 8], // 箭头大小
                  symbolOffset: [0, 7], // 箭头位置
                  lineStyle: {
                     color: 'rgba(0, 0, 0, 0.65)',
                     width: 1,
                     type: 'solid'
                  }
               },
               axisLabel: {
                  textStyle: {
                     fontSize: 12
                  },
                  rotate: 60
               },
               offset: 0,
               position: 'bottom',
               containLabel: true, // gird 区域是否包含坐标轴的刻度标签
               type: 'category'
            },
            yAxis: {
               show: true,
               name: '消费趋势',
               nameTextStyle: {
                  // 坐标轴名称样式
                  color: 'rgba(0, 0, 0, 0.65)',
                  padding: [30, 30, 0, 80]
               },
               position: 'left',
               nameLocation: 'end',
               axisLine: {
                  show: true,
                  symbol: ['none', 'arrow'], // 是否显示轴线箭头
                  symbolSize: [8, 8], // 箭头大小
                  symbolOffset: [0, 7], // 箭头位置
                  lineStyle: {
                     color: 'rgba(0, 0, 0, 0.65)',
                     width: 1,
                     type: 'solid'
                  }
               },
               splitLine: {
                  show: true,
                  lineStyle: {
                     type: 'dashed'
                  }
               }
            }
         },
         // 消费趋势数据
         consumeDetailBarChart: {
            columns: ['日期', '消费趋势'],
            rows: [
               { 日期: '2019/01', 消费趋势: 1393 },
               { 日期: '2019/02', 消费趋势: 3530 },
               { 日期: '2019/03', 消费趋势: 2923 },
               { 日期: '2019/04', 消费趋势: 3530 },
               { 日期: '2019/05', 消费趋势: 2923 },
               { 日期: '2019/06', 消费趋势: 1223 },
               { 日期: '2019/07', 消费趋势: 3130 },
               { 日期: '2019/08', 消费趋势: 2900 },
               { 日期: '2019/09', 消费趋势: 1393 },
               { 日期: '2019/10', 消费趋势: 3530 },
               { 日期: '2019/11', 消费趋势: 2923 },
               { 日期: '2019/12', 消费趋势: 3530 }
            ]
         },
         // 环图事件
         consumeDetailRingChartEvents: {
            // 监听图例选中状态事件
            legendselectchanged: params => {
               let option = this.ringEcharts.getOption()
               let selectKey = Object.keys(params.selected)
               selectKey.map(res => {
                  option.legend[0].selected[res] = true
               })
               this.ringEcharts.setOption(option)
            }
         },
         // 环图echarts实例
         consumeDetailRingEcharts: '',
         // 环图配置
         consumeDetailRingChartSettings: {
            selectedMode: 'single',
            hoverAnimation: false,
            radius: ['40%', '50%'],
            itemStyle: {
               borderWidth: 2,
               borderColor: '#ffffff'
            },
            offsetY: 150
         },
         consumeDetailRingExtend: {
            series: {
               label: {
                  show: true,
                  formatter(params) {
                     return `${params.name}\n${params.percent}%`
                  }
               }
            },
            tooltip: {
               trigger: 'item',
               formatter(params) {
                  return `¥ ${formatMoney(params.value)}`
               }
            },
            legend: {
               show: false
            }
         },
         // 消费类别占比数据
         consumeDetailRingChartData: {
            columns: ['消费类别', '金额'],
            rows: [
               { 消费类别: '差旅', 金额: 1393 },
               { 消费类别: '机票', 金额: 3530 },
               { 消费类别: '订餐', 金额: 2923 },
               { 消费类别: '市内交通', 金额: 1723 },
               { 消费类别: '招待费', 金额: 3792 },
               { 消费类别: '酒店', 金额: 4593 }
            ]
         },
         // 个人消费情况数据
         consumeDetailPersonalConsume: [
            {
               name: '张三',
               allConsumeAmount: 2345.3
            },
            {
               name: '里斯',
               allConsumeAmount: 23345.3
            },
            {
               name: '张三',
               allConsumeAmount: 2345.3
            },
            {
               name: '里斯',
               allConsumeAmount: 23345.3
            },
            {
               name: '张三',
               allConsumeAmount: 2345.3
            },
            {
               name: '里斯',
               allConsumeAmount: 23345.3
            },
            {
               name: '里斯',
               allConsumeAmount: 23345.3
            }
         ],
         // 折线图配置
         compareLineChartExtend: {
            grid: {
               left: 20,
               right: 30
            },
            legend: {
               show: true,
               orient: 'horizontal',
               right: 60,
               data: [
                  {
                     name: '本月',
                     icon: 'circle'
                  },
                  {
                     name: '上月',
                     icon: 'circle'
                  }
               ]
            },
            xAxis: {
               show: true,
               name: '天',
               nameLocation: 'end',
               nameTextStyle: {
                  fontSize: 10,
                  color: 'rgba(0, 0, 0, 0.65)',
                  padding: [30, 30, 0, 0]
               },
               nameGap: 0,
               axisLine: {
                  // 坐标轴 轴线
                  show: true, // 是否显示
                  symbol: ['none', 'arrow'], // 是否显示轴线箭头
                  symbolSize: [8, 8], // 箭头大小
                  symbolOffset: [0, 7], // 箭头位置
                  lineStyle: {
                     color: 'rgba(0, 0, 0, 0.65)',
                     width: 1,
                     type: 'solid'
                  }
               },
               axisLabel: {
                  textStyle: {
                     fontSize: 10
                  },
                  rotate: 60
               },
               offset: 0,
               position: 'bottom',
               containLabel: true, // gird 区域是否包含坐标轴的刻度标签
               type: 'category'
            },
            yAxis: {
               show: true,
               position: 'left',
               nameLocation: 'end',
               axisLine: {
                  show: true,
                  symbol: ['none', 'arrow'], // 是否显示轴线箭头
                  symbolSize: [8, 8], // 箭头大小
                  symbolOffset: [0, 7], // 箭头位置
                  lineStyle: {
                     color: 'rgba(0, 0, 0, 0.65)',
                     width: 1,
                     type: 'solid'
                  }
               },
               splitLine: {
                  show: true,
                  lineStyle: {
                     type: 'dashed'
                  }
               }
            }
         },
         // 折线图数据
         compareLineChartData: {
            columns: ['日期', '本月', '上月'],
            rows: [
               { 日期: '2019-07-01', 本月: 93, 上月: 103 },
               { 日期: '2019-07-02', 本月: 330, 上月: 230 },
               { 日期: '2019-07-03', 本月: 223, 上月: 623 },
               { 日期: ' 2019-07-04', 本月: 0, 上月: 0 },
               { 日期: '2019-07-05', 本月: 0, 上月: 0 },
               { 日期: '2019-07-06', 本月: 0, 上月: 0 },
               { 日期: '2019-07-07', 本月: 0, 上月: 0 },
               { 日期: '2019-07-08', 本月: 0, 上月: 0 },
               { 日期: '2019-07-09', 本月: 0, 上月: 0 },
               { 日期: '2019-07-10', 本月: 0, 上月: 0 },
               { 日期: '2019-07-11', 本月: 0, 上月: 0 },
               { 日期: '2019-07-12', 本月: 0, 上月: 0 },
               { 日期: '2019-07-13', 本月: 0, 上月: 0 },
               { 日期: '2019-07-14', 本月: 0, 上月: 0 },
               { 日期: '2019-07-15', 本月: 0, 上月: 0 },
               { 日期: '2019-07-16', 本月: 0, 上月: 0 },
               { 日期: '2019-07-17', 本月: 0, 上月: 0 },
               { 日期: '2019-07-18', 本月: 0, 上月: 0 },
               { 日期: '2019-07-19', 本月: 0, 上月: 0 },
               { 日期: '2019-07-20', 本月: 0, 上月: 0 },
               { 日期: '2019-07-21', 本月: 0, 上月: 0 },
               { 日期: '2019-07-22', 本月: 0, 上月: 0 },
               { 日期: '2019-07-23', 本月: 0, 上月: 0 },
               { 日期: '2019-07-24', 本月: 0, 上月: 0 },
               { 日期: '2019-07-25', 本月: 0, 上月: 0 },
               { 日期: '2019-07-26', 本月: 0, 上月: 0 },
               { 日期: '2019-07-27', 本月: 0, 上月: 0 },
               { 日期: '2019-07-28', 本月: 0, 上月: 0 },
               { 日期: '2019-07-29', 本月: 0, 上月: 0 },
               { 日期: '2019-07-30', 本月: 0, 上月: 0 },
               { 日期: '2019-07-31', 本月: 0, 上月: 0 }
            ]
         },
         // 今日数据
         compareDataToday: {
            consumeAmount: void (0),
            busAmount: void (0),
            consumeTimes: void (0),
            consumePersons: void (0)
         },
         // 昨日数据
         compareDataYesterday: {
            consumeAmount: void (0),
            busAmount: void (0),
            consumeTimes: void (0),
            consumePersons: void (0)
         },
         entAccountInfo: {
            entName: '上海新瓴拓科技有限公司',
            remainAmount: 18000,
            totalAmount: 30000,
            totalOpenBankNum: 230
         },
         billInfo: {
            monthTime: '201903',
            billType: 'pending',
            busAmount: 2789.33,
            billAmount: 3456.78,
            billDate: '3月5日',
            repayDate: '3月15日',
            state: ''
         }
      }
   },
   computed: {
      // 消费总计
      consumeall() {
         let sum = 0
         if (
                 this.consumeDetailRingChartData &&
                 this.consumeDetailRingChartData.rows
         ) {
            this.consumeDetailRingChartData.rows.forEach(item => {
               sum += item['金额']
            })
         }
         return sum
      }
   },
   filters: {
      formatMoney,
      formatNum(num) {
         return formatMoney(num, 0)
      }
   },
   created() {
      this.searchConsumeDetail()
      this.getAccAndBillInfo()
      this.getFoldLine()
   },
   methods: {
      moment,
      // 获取账户信息与账单信息
      getAccAndBillInfo() {
         post('/dashboard/outer/standard/accAndBill', {
            entId: getCookie('entId')
         }).then(res => {
            this.entAccountInfo = res.entAccount
            this.billInfo = res.billInfo
         }).catch(err => {
            this.$message.error(err)
         })
      },
      //立即还款
      doRepay() {
         this.$router.push('//entBill/repay')
      },
      // 限制结束日期必须在选择了开始日期之后
      onChangeEnd() {
         if (!this.startMonth) {
            this.$message.error('请选择开始日期')
            this.endMonth = null
         }
      },
      // 根据结束日期限制开始日期的可选范围（区间范围为12个月）
      disabledStartDate(startMonth) {
         // 未选择结束日期的时候，开始日期仅限制不能选超过当前月份
         if (!this.endMonth) {
            return startMonth && startMonth > moment().endOf('months')
         }

         let startMonthFormat = new Date(
                 startMonth.format('YYYY'),
                 startMonth.format('M')
         )
         let endMonthFormat = new Date(
                 this.endMonth.format('YYYY'),
                 this.endMonth.format('M')
         )
         return (
                 monthDiff(startMonthFormat, endMonthFormat) <= 0 ||
                 monthDiff(startMonthFormat, endMonthFormat) >= 12
         )
      },
      // 结束日期不能选超过当前月份，同时不能选小于开始日期,不能选大于开始日期12个月的
      disabledEndDate(endMonth) {
         if (this.startMonth) {
            let startMonthFormat = new Date(
                    this.startMonth.format('YYYY'),
                    this.startMonth.format('M')
            )
            let endMonthFormat = new Date(
                    endMonth.format('YYYY'),
                    endMonth.format('M')
            )
            return (
                    endMonth > moment().endOf('months') ||
                    monthDiff(startMonthFormat, endMonthFormat) <= 0 ||
                    monthDiff(startMonthFormat, endMonthFormat) >= 12
            )
         }

         return endMonth && endMonth > moment().endOf('months')
      },
      // 获取消费情况概览数据
      searchConsumeDetail() {
         get('/dashboard/outer/standard/getConsumeView', {
            startMonth: this.startMonth.format('YYYYMM'),
            endMonth: this.endMonth.format('YYYYMM'),
            billBussAttr: this.billBussAttr
         })
         .then(res => {
            console.log('res', res)
            this.consumeDetailBarChart.rows = res.barChart.rows
            this.consumeDetailRingChartData.rows = res.ringChart.rows
            this.consumeDetailPersonalConsume = res.personalConsume
         })
         .catch(err => {
            this.$message.error(err)
         })
      },
      // 消费类型切换
      consumeTypeChange(value) {
         this.billBussAttr = value
      },
      // 折线图数据,今日/昨日数据
      getFoldLine: debounce(function() {
         const { monthType, compareType } = this
         get('/dashboard/outer/standard/getFoldLine', {
            monthType,
            compareType
         })
         .then(res => {
            this.compareLineChartData.rows = res.chartData.rows
            this.compareDataToday = res.compareData.today
            this.compareDataYesterday = res.compareData.yesterday
         })
         .catch(err => {
            this.$message.error(err)
         })
      }, 800),
      // compareType 切换
      compareTypeChange(compareType) {
         this.compareType = compareType
         this.getFoldLine()
      },
      // 对比维度切换
      monthTypeChange(value) {
         this.monthType = value
         this.getFoldLine()
      },
      // 设置环图的中间值
      consumeDetailRingAfterConfig(options) {
         return Object.assign(options, {
            graphic: [
               {
                  type: 'text',
                  left: 'center',
                  top: '32%',
                  style: {
                     text: '消费总计',
                     fontSize: 12
                  }
               },
               {
                  type: 'text',
                  left: 'center',
                  top: '36%',
                  style: {
                     text: `¥ ${formatMoney(this.consumeall)}`,
                     fontSize: 14
                  }
               }
            ]
         })
      },
      // 获取环图的echarts实例
      consumeDetailRingAfterSetOptionOnce(ringEcharts) {
         this.consumeDetailRingEcharts = ringEcharts
      }
   }
}
</script>

<style lang="less" scoped>
   .dashboardWrap {
      background-color: #f0f2f5;
      margin: -40px -24px 0 -24px;
   }

   .entAndBillInfoWrap {
      margin-bottom: 50px;
      display: flex;
      justify-content: space-between;

      .divider {
         margin: 12px 0;
      }

      .entAccountInfo {
         width: 49.5%;
         background: #ffffff;
         padding: 20px;

         .top {
            .label {
               font-weight: 800;
               font-size: 16px;
            }

            .entName {
               font-weight: 500;
               margin-left: 5px;
               font-size: 12px;
            }
         }

         .remainAmountLabel {
            font-weight: 800;
            font-size: 14px;
         }

         .remainAmount {
            font-weight: 500;
            font-size: 20px;
         }

         .totalAmount {
            font-weight: 800;
            font-size: 12px;
         }
      }

      .billInfo {
         width: 49.5%;
         background: #ffffff;
         padding: 20px;

         .ant-btn-sm {
            height: 22px;
            font-size: 10px;
            font-weight: 800;
         }

         .itemLable {
            font-weight: 800;
            font-size: 14px;
         }

         .itemCon {
            font-weight: 500;
            font-size: 14px;
         }
      }
   }

   .compareLineWrap {
      background-color: #ffffff;
      margin-top: -40px;
      padding: 20px;

      .selected {
         color: #627eff;
      }

      .selected:before {
         content: '';
         position: absolute;
         left: 0;
         top: -8px;
         right: 0px;
         width: 40%;
         border-top: 3px solid #627eff;
      }

      .label {
         font-weight: 800;
         margin-bottom: 10px;
      }

      .today {
         margin-bottom: 15px;
         font-size: 18px;
         font-weight: 500;
      }

      .todayLabel {
         font-size: 16px;
         margin-bottom: 15px;
      }

      .yesterday {
         font-weight: 500;
      }
   }

   .consumeDetailWrap {
      background-color: #ffffff;
      margin-top: 10px;
      padding: 20px;

      .label {
         text-align: left;
         font-weight: 800;
         font-size: 14px;
         color: #000000;
      }

      .personalConsumeWrap {
         .item {
            margin-bottom: 15px;

            &.last-child {
               margin-bottom: 0;
            }

            .index {
               width: 20px;
               height: 20px;
               text-align: center;
               border-radius: 50%;
            }

            .topThree {
               background-color: #000000;
               color: #ffffff;
            }

            .leftOver {
               background-color: #bbb;
               color: #ffffff;
            }
         }
      }
   }
</style>
